<template>
  <div class="app-container">
    <div class="top-button">
      <el-button type="primary" @click="addRole" size="small"
        >添加角色</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" label="角色名">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" width="240px" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="modifyRole(scope.row)"
            type="primary"
            size="small"
            icon="el-icon-edit"
          >
            修改
          </el-button>
          <el-button
            @click="deleteRole(scope.row.id)"
            type="primary"
            size="small"
            icon="el-icon-delete"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <AddRole ref="role" @getList="getList" :title="title"></AddRole>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { fetchList } from "@/api/article";
import AddRole from "./addRole.vue";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination

export default {
  name: "ArticleList",
  components: { Pagination, AddRole },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  data() {
    return {
      title: "",
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    modifyRole(item) {
      this.title = "编辑角色";
      this.axios.get('http://81.70.46.38:8080/role/accessByRoleId', {
        params: {
          id: item.id
        },
        withCredentials: true
      }).then( res => {
        var arr = []
        var arr2 = []
        this.$refs.role.id = item.id
        for (var i = 0; i < res.data.result.length; i++) {
          if (res.data.result[i].parentId === 0) {
            continue
          } else {
            arr.push([res.data.result[i].parentId, res.data.result[i].id])
            arr2.push(res.data.result[i].id)
          }
        }
        this.$refs.role.roleName = item.name
        this.$refs.role.cascader = arr
        this.$refs.role.dialogVisible = true;
      })
    },
    deleteRole(id) {
      this.$confirm("此操作将永久删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.axios
            .get("http://81.70.46.38:8080/role/delete", {
              params: {
                id: id
              },
              withCredentials: true
            })
            .then(res => {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.getList()
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getList() {
      this.listLoading = true;
      this.axios.get("http://81.70.46.38:8080/role/list", {
        params: {
          pageNum: this.listQuery.page,
          pageSize: this.listQuery.limit
        },
        withCredentials: true
      }).then(res => {
        if (res.data.code === 200) {
          this.list = res.data.result.list;
          this.total = res.data.result.total;
          this.listLoading = false;
        }
      });
      // fetchList(this.listQuery).then(response => {
      //   this.list = response.data.items
      //   this.total = response.data.total
      //   this.listLoading = false
      // })
    },
    addRole() {
      this.title = "添加角色";
      this.$refs.role.dialogVisible = true;
    }
  }
};
</script>

<style lang="less" scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.top-button {
  margin-bottom: 15px;
}
</style>
